<template>
  <div class="tab-change-container">
    <el-tabs :model-value="props.activeTab" @tab-change="handleTabChange">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.value"
        :name="item.value"
      >
        <template #label>
          <div class="tab-item-label">
            <span>{{ item.label }}</span>
            <el-badge
              v-if="item.num > 0"
              :value="item.num > 99 ? '99+' : item.num"
              class="tab-badge"
            />
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { PropType } from 'vue';

// --- 1. 定义 Props 和 Emits ---
const props = defineProps({
  orderStatics: {
    type: Object as PropType<any>,
    default: () => ({ toBeConfirmed: 0, confirmed: 0, deliveryInProgress: 0 })
  },
  activeTab: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['update:activeTab', 'tabChange']);

// --- 2. 计算属性 ---
const tabList = computed(() => [
  { label: '全部订单', value: 0, num: 0 },
  { label: '待接单', value: 2, num: props.orderStatics.toBeConfirmed },
  { label: '待派送', value: 3, num: props.orderStatics.confirmed },
  { label: '派送中', value: 4, num: props.orderStatics.deliveryInProgress },
  { label: '已完成', value: 5, num: 0 },
  { label: '已取消', value: 6, num: 0 },
]);

// --- 3. 方法 ---
const handleTabChange = (tabName: number | string) => {
  const newActiveTab = Number(tabName);
  emit('update:activeTab', newActiveTab); // 通知父组件更新 activeTab
  emit('tabChange'); // 告诉父组件：是时候刷新数据了
};
</script>

<style lang="scss" scoped>
// 引入你的全局变量文件
@import "@/styles/_variables.scss";

.tab-change-container {
  background-color: #fff;
  padding: 10px 20px 0;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  // :deep() 用于修改 Element Plus 子组件的样式
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 0; // 移除底部默认下划线
  }
  :deep(.el-tabs__item) {
    font-size: 14px;
    font-weight: 500;

    // 激活状态的样式 (使用你项目的主题色)
    &.is-active {
      color: $sky-blue; // 假设这是你的蓝色主题色变量
    }
  }

  // 自定义标签内容样式
  .tab-item-label {
    display: flex;
    align-items: center;
  }

  // 角标样式
  .tab-badge {
    margin-left: 8px;
    .el-badge__content {
      background-color: #f56c6c; // 红色背景
      border: none;
      // 确保角标垂直居中
      line-height: 1.2;
      height: 18px;
      min-width: 18px;
      border-radius: 10px;
    }
  }
}
</style>
